<template>
	<div class="margin-container-list">
		<div class="header">
			<div>活动名称：{{entity.title}}</div>
			<div class="mar-t-6">
				<span>活动时间：{{entity.startTime}} - {{entity.endTime}}</span>
				<span>包邮条件：消费满{{entity.fullPrice}}元免运费 ，不满统一运费 {{entity.postFee}}元</span>
			</div>
		</div>
		<div class="pad-t-30 pad-r-30 flex-between total-row">
			<div class="align-c height-172 mar-l-20 flex-item shadow-box">
				<div class="font-36 color-price">{{ entity.totalPrice }}</div>
				<div class="font-14 font-color-9 mar-t-30">合计活动销售额(元)</div>
			</div>
			<div class="align-c height-172 mar-l-20 flex-item shadow-box">
				<div class="font-36 color-price">{{ entity.orderNum }}</div>
				<div class="font-14 font-color-9 mar-t-30">合计活动订单数(笔)</div>
			</div>
			<div class="align-c height-172 mar-l-20 flex-item shadow-box">
				<div class="font-36 color-price" v-if="entity.orderNum != 0">{{ entity.totalPrice / entity.orderNum }}
				</div>
				<div class="font-36 color-price" v-else>0</div>
				<div class="font-14 font-color-9 mar-t-30">活动客单价(元)</div>
			</div>
		</div>
		<!--表格-->
		<div>
			<!-- 内容列表 -->
			<div class="table-container">
				<el-table ref="multipleTable" :data="entityList" @selection-change="handleSelectionChange"
					v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
					<el-table-column min-width="350px" label="商品">
						<template slot-scope="scope">
							<div class="flex v-align-c cursor-p">
								<label><img :src="scope.row.imageUrl" class="user-avatar"></label>
								<div class="font-14 pad-l-10">
									<div>{{scope.row.title}}</div>
									<template v-if="scope.row.categoryName">
										<div>
											<span class="category-style">[{{scope.row.categoryName}}]</span>
											<el-tag class="mar-l-10" size="mini" v-if="scope.row.skuFlag == 1"
												effect="light">多规格</el-tag>
										</div>
									</template>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="120px" label="现有库存">
						<template slot-scope="scope">
							<template v-if="scope.row.stock <= scope.row.warnStock">
								<span style="color: #dd1100">{{scope.row.stock - scope.row.stockInUse}}</span>
							</template>
							<template v-else>
								{{scope.row.stock - scope.row.stockInUse}}
							</template>
						</template>
					</el-table-column>
					<el-table-column width="120px" label="零售价">
						<template slot-scope="scope">
							￥{{scope.row.sellPrice}}
						</template>
					</el-table-column>
					<el-table-column width="150px" label="活动销售额(元)">
						<template slot-scope="scope">
							<span>￥{{scope.row.totalPrice}}</span>
						</template>
					</el-table-column>
					<el-table-column width="150px" label="活动订单笔数(元)" prop="orderNum"></el-table-column>
				</el-table>
			</div>
			<!-- 列表分页 -->
			<div class="pagination mar-b-0 pad-b-20">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="entityListQuery.currentPage" :page-sizes="[10, 20, 50, 100]"
					:page-size="entityListQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
	  pagingGoodsActive
	} from '@/api/sell/promotionGoods'
	import {
	  countPromotionOrder
	} from '@/api/sell/promotion'
	export default {
	  data() {
	    return {
	      entity: {
	        title: '',
	        startTime: '',
	        endTime: '',
	        totalPrice: 0,
	        orderNum: 0,
	        postFee: 0,
	        fullPrice: 0
	      },
	      promotionId: '',
	      entityList: [],
	      total: null,
	      listLoading: false,
	      entityListQuery: {
	        currentPage: 1,
	        size: 10,
	        promotionId: this.promotionId
	      }
	    }
	  },
	  // 初始化页面
	  created() {
	    const queryParams = this.getCurrentPage().query
	    if (queryParams.promotionId) {
	      this.promotionId = queryParams.promotionId
	      this.initEntity()
	      this.initEntityList()
	    }
	  },
	  methods: {
	    // 更改当前页面大小
	    handleSizeChange(val) {
	      this.entityListQuery.size = val
	      this.initEntityList()
	    },
	    // 更改当前页数
	    handleCurrentChange(val) {
	      this.entityListQuery.currentPage = val
	      this.initEntityList()
	    },
	    // 勾选
	    handleSelectionChange(val) {
	      this.multipleSelection = val
	    },
	    initEntity() {
	      countPromotionOrder(this.promotionId).then(response => {
	        if (response.isError) return
	        this.entity = response.data
	      })
	    },
	    initEntityList() {
	      this.listLoading = true
	      console.log(this.promotionId)
	      this.entityListQuery.promotionId = this.promotionId
	      pagingGoodsActive(this.entityListQuery).then(response => {
	        if (response.isError) return
	        this.entityList = response.data.records
	        this.total = response.data.total
	        this.listLoading = false
	      })
	    }
	  }
	}
</script>
<style lang="less" scoped>
	.margin-container-list {
		min-height: 100%;
		background: #FAFAFA;
		margin: 0;
		padding: 20px 20px 0;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		height: 76px;
		padding-left: 20px;
		font-size: 16px;
		color: #666;
		background: #E2F0FF;
	}

	.shadow-box {
		background: white;
		box-shadow: 0 0 15px rgba(154, 154, 154, 0.21);
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.top-operate {
		margin-bottom: 0;
	}

	.search-item {
		display: flex;
		align-items: center;
		padding-bottom: 15px;
		border-bottom: solid 1px #E4E7ED;

		>div,
		.el-cascader {
			margin-right: 10px;
		}

		.el-input {
			width: 300px;
		}
	}

	.btn-search {
		height: 60px;
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 68px;
		height: 68px;
		display: block;
		padding: 1px;
		border: #efefef 1px solid;
	}

	.category-style {
		color: #3abbdb;
	}

	.gray-bar {
		background: #e4e4e4;
		padding: 20px;
		margin-bottom: 20px;
		width: 80%;
	}

	.tips {
		color: gray;
		font-size: 12px;
		line-height: 1.2;
		padding-top: 5px;
	}

	.color-price {
		color: #409EFF;
	}

	.total-row {
		padding-bottom: 36px;
		background: white;

		.align-c {
			justify-content: center;
		}
	}
</style>
